<template>
	<view class="page">
		<view class="nav_bar">
			<uni-nav-bar color="#333" left-icon="left" title="分类管理" :border='false' :fixed="true"
				background-color="transparent" @clickLeft="$util.back()" right-text="添加" @clickRight="toAddNew"></uni-nav-bar>
		</view>

		<view class="nav_box"></view>

		<view class="container">
			<view class="list flex_r_between" v-for="(item,index) in list" :key="index">
				<view class="left flex_center">
					<view class="switch">
						<switch :checked="item.status == 1" @change="onDisable($event,item)" color="#FD2A53" />
					</view>
					
					<view class="text">
						<view>{{ item.name }}</view>
						<text>数据来源：商品</text>
					</view>
				</view>
				
				<view class="right flex_center">
					<view class="icon" @click="onUp(item)">
						<image :src="$util.prefix('public/store_class_up.png')" mode="aspectFill"></image>
					</view>
					
					<view class="icon" @click="onDown(item)">
						<image :src="$util.prefix('public/store_class_down.png')" mode="aspectFill"></image>
					</view>
					
					<view class="icon" @click="onEdit(item)">
						<image :src="$util.prefix('public/store_class_edit.png')" mode="aspectFill"></image>
					</view>
					
					<view class="icon" @click="onDetele(item)">
						<image :src="$util.prefix('public/store_class_detele.png')" mode="aspectFill"></image>
					</view>
				</view>
				
			</view>
		</view>

		<u-popup :safeAreaInsetBottom="false" :show="show" mode="center" @close="show = false"
			bgColor="transparent">
			<view class="modal flex_c">
				<view class="modal-title">添加分类</view>
				<view class="modal-input">
					<input type="text" v-model="name" placeholder="请输入分类名称" placeholder-class="input-placeholder" />
				</view>
				<view class="modal-btn flex_r_between">
					<view class="modal-btn-item cancel flex_r_around" @click="onCloseModal">
						<text>取消</text>
					</view>
					
					<view class="modal-btn-item confim flex_r_around" @click="setStoreCategory">
						<text>添加</text>
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				
				name: '',
				sort: 0,
				id: 0,
				// 1=正常，2=禁用
				status: 1,
				
				list: [],
				
				
				disable: false,
			}
		},
		methods: {
			onDisable(event,item){
				this.name = item.name;
				this.status = event.detail.value ? 1 : 2;
				this.id = item.id;
				this.sort = item.sort;
				this.setStoreCategory();
			},
			
			toAddNew(){
				this.name = '';
				this.status = 1;
				this.id = 0;
				this.sort = 0;
				this.show = true;
			},
			
			onUp(item){
				this.$get('/store.store_category/setSort',{
					id: item.id,
					type: 1,
				}).then(res=>{
					this.$util.msg(res.msg);
					this.getStoreCategory();
				});
			},
			
			onDown(item){
				this.$get('/store.store_category/setSort',{
					id: item.id,
					type: 2,
				}).then(res=>{
					this.$util.msg(res.msg);
					this.getStoreCategory();
				});
			},
			
			onEdit(item){
				this.name = item.name;
				this.status = item.status;
				this.id = item.id;
				this.sort = item.sort;
				this.show = true;
			},
			
			onDetele(item){
				this.$get('/store.store_category/delCategory',{
					id: item.id
				}).then(res=>{
					this.getStoreCategory();
				});
			},
			
			onCloseModal(){
				this.name = '';
				this.status = 1;
				this.id = 0;
				this.sort = 0;
				this.show = false;
			},
			
			setStoreCategory(){
				
				if(this.disable){
					return;
				}
				
				if(!this.name){
					return this.$util.msg('请添加分类名称')
				}
				
				this.disable = true;
				this.$post('/store.store_category/setStoreCategory',{
					name: this.name,
					sort: this.sort,
					id: this.id,
					status: this.status,
				},true,()=>{
					this.disable = false;
				}).then(res=>{
					this.$util.msg(res.msg);
					this.name = '';
					this.status = 1;
					this.id = 0;
					this.sort = 0;
					this.show = false;
					this.getStoreCategory();
					this.disable = false;
				})
			},
			
			getStoreCategory(){
				this.$get('/store.store_category/getStoreCategory').then(res=>{
					this.list = res.data;
				});
			}
		},
		
		onLoad() {
			this.getStoreCategory();
		}
	}
</script>

<style lang="less" scoped>
	.page {
		min-height: 100vh;
		padding: 24rpx 0;
		background: #FFF;
	}

	.nav_bar {
		background: url(https://qiniu-cdn.maeiyun.com//h5static/newstore/new_store_background.png) 0 0 no-repeat;
		background-size: 100%;

		/deep/ .uni-nav-bar-right-text {
			font-weight: 500;
			font-size: 30rpx;
			color: #FD2A53 !important;
		}
	}
	
	.container {
		.list {
			padding: 24rpx 40rpx;
			
			.left {
				
				.switch {
					switch {
						transform:scale(0.8)
					}
				}
				
				.text {
					margin-left: 24rpx;
					view {
						font-size: 26rpx;
						color: #131313;
					}
					
					text {
						font-size: 24rpx;
						color: #999999;
					}
				}
			}
		
			.right {
				.icon {
					padding: 10rpx;
					margin-left: 20rpx;
					image {
						width: 28rpx;
						height: 28rpx;
					}
				}
			}
		
		}
	}
	
	.modal {
		width: 560rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		padding: 48rpx 0 38rpx;
		
		.modal-title {
			font-weight: 500;
			font-size: 36rpx;
			color: #FD2A53;
			line-height: 50rpx;
		}
		
		.modal-input {
			width: 400rpx;
			height: 96rpx;
			background: #F8F8F8;
			border-radius: 16rpx;
			padding: 0 32rpx;
			margin: 16rpx 0 40rpx;
			input {
				width: 100%;
				height: 100%;
				font-size: 28rpx;
				color: #131313;
				text-align: center;
			}
		}
		
		.modal-btn {
			width: 472rpx;
			.modal-btn-item {
				width: 224rpx;
				height: 88rpx;
				border-radius: 44rpx;
				
				text {
					font-size: 28rpx;
				}
			}
			
			.confim {
				background: #FD2A53;
				text {
					color: #FFFFFF;
				}
			}
			
			.cancel {
				background: #F1F1F1;
				text {
					color: #131313;
				}
			}
		}
		
	}
	
</style>